<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="kener.linfeng@gmail.com">
    <title>ECharts · About</title>

    <link rel="shortcut icon" href="./asset/ico/favicon.png">

    <link href="./asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="./asset/css/bootstrap.css" rel="stylesheet">
    <link href="./asset/css/carousel.css" rel="stylesheet">
    <link href="./asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        /* Main marketing message and sign up button */
        .img-circle {
            border: 1px solid rgba(0, 0, 0, 0.2);
            padding: 4px;
            margin: 5px;
        }

        .container p {
            margin-top: 30px;
        }

        h2 a {
            font-size: 22px;
        }
    </style>
</head>

<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>

<div class="container">
    <div class="row">
        <h2>ORIGIN</h2>
        <img class="pull-right" src="asset/img/about/zrender1.png" style="margin-left:20px;">

        <p>ECharts (a contraction of Enterprise Charts) is a commercial charting solution originally intended to address
            the report need of the <abbr title="Baidu">Company's</abbr> various business systems, such as Baidu
            Promotion (凤巢), Advertising Manager (广告管家). Previously we used Flash to fulfill those needs, but the problem
            is, due to Baidu's highly clear-cut division of labor, there is a special team in charge of Flash. As a
            result, everything – from the design of data interface to personalized needs - has to be negotiated and
            agreed upon, leaving little room for front-end engineers to control completely. Moreover, there is no Flash
            common to all the scenes in a system. Worse still, Steve Jobs, the co-founder and then CEO of Apple Inc.,
            insisted that Apple wouldn't allow Flash on the iPhone, iPod touch and iPad. For all these reasons, and
            given the soaring popularity of html5, we decided to try something else. Therefore in early 2012 <a
                href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng (Kener)</a>, the then front-end technical
            director of Baidu Promotion, tried to make charts via Canvas in the Data Platform Project of Baidu
            Promotion. He wrote a whole new lightweight Canvas library ZRender, which is actually the prototype of
            ECharts, albeit miles from the one in front of you now.</p>

        <p><a href="http://weibo.com/errorrik" target="_blank">Erik</a>, Baidu's senior front-end developer, built the
            team of Baidu business front-end general technology right after his return. Against the above backdrop, and
            with the firm support of the front-end team manager <a href="http://weibo.com/forain" target="_blank">Zu
                Ming</a>, data visualization became an important field of general technology studies. So it's only
            natural that Lin Feng switched his role and began to head the Baidu business front-end data visualization
            team, which comprises the foremost front-line software engineers including <a
                href="http://weibo.com/pissang" target="_blank">Shen Yi</a> (tech genius obsessed with web3d), <a
                href="http://weibo.com/wind108369" target="_blank">Yang Ji</a> (graphic maniac), <a
                href="http://weibo.com/u/2113446991" target="_blank">Su Shuang </a>(who has hands-on experience of SVG /
            GUI) and Chen Huaimu (who knows color inside out).</p>

        <p>As mentioned above, ECharts is based on ZRender. Back then ZRender had charting features, and we already
            managed to add the Drag-Recalculate option. Nevertheless, the coupling of various graphic data logic and
            image rendering, non-modularity, and the arbitrary customized demos made us realize that it was by no means
            a decent design. Therefore, for the first time we made a large-scale ZRender reconstruction, cutting out all
            its charting features and making it a pure Canvas library under the hood. </p>
        <img class="pull-left" src="asset/img/about/echarts1.png" style="margin-right:10px;">

        <p>The chart logic from ZRender was then made into the fundamental framework for ECharts Version 0.1, which, to
            be honest, was still a demo, for the interface was not standardized, and both customization and universality
            were terrible. Erik, Lin Feng, and three senior engineers from the Flash team (FYI, it was they or their
            team who made almost all the Flash charts in the Baidu business system over the years) opened six meetings
            in nearly two months before the final approval and release of ECharts Standard Version 1.0. The standard was
            defined in pursuit of rational design and high customizability, regardless of implementation costs. So it
            was like the team was digging itself a bottomless pit. For the ensuing ten months, the team found itself
            climbing out of the pit step by step.</p>

        <p>Lucky for us, we finally made it. On June 30, 2013, ECharts Version 1.0 was launched. And the standard became
            the API reference of ECharts 1.0 when richer interactivity were added. Its importance is unquestionable
            despite the fact that it is now only a part of the ECharts documentation. Today when we look back, we
            sincerely thank the five extraordinary engineers - Lin Feng, Zhao Shu, Erik, Liu Yang, Yang Dong - for
            setting the spectacular standard. They convinced us that compared with implementation costs, a reasonable
            interface design is far more important.</p>
    </div>

    <div class="row featurette">
        <h2>DEVELOPMENT</h2>

        <p>It all started as a response to Baidu's own business needs, yet the real opportunity for the way ahead lies
            in open source. Though there has been innumerable JS charting libraries in China, ECharts, with its
            revolutionary new functionality and technology, has taken the industry by storm right after its release.
            Commonly lauded as a "<a href="http://www.itongji.cn/article/0P525392013.html" target="_blank">rising
                star</a>" of China's data visualization, it was featured by mainstream technical media such as CSDN,
            ITEye, InfoQ, iTongji as well as COS. In particular, OSChina did a week-long ECharts promotion on its home
            page, with the post being bookmarked for over 1,000 times. What's more, just 18 months after its release on
            GitHub, ECharts was starred for more than 5,000 times, which means that it has become the most-watched
            Chinese open source project around the globe. ECharts is also the first Chinese project which selected into
            <a href="https://github.com/showcases/data-visualization" target="_blank">Github Explorer Data
                Visualization</a>. Today, hundreds of companies - ranging over a variety of fields including media,
            finance, e-commerce, tourism, hotels, weather, geography, video games, and electric power - trust ECharts
            Solution when it comes to enterprise-grade charting.</p>

        <p>We are so very flattered that, just 6 months after its release, ECharts made it to "<a
            href="http://www.oschina.net/news/47438/2013-top-10-hot-projects-in-china" target="_blank">The Ten Hottest
            Domestic Open Source Projects of the Year</a>" and took the lead in "<a
            href="http://www.oschina.net/news/47468/2013-top-20-newest-opensource-projects" target="_blank">The Twenty
            Hottest New Open Source Software of the Year</a>". In addition, we never dreamed that ECharts would get so
            many attentions from other domains or countries: expansions of multiple domestic and international versions
            appeared on RtypeL; it's said that there are two financial consulting firms in the Asia-Pacific region
            developing ECharts-based BI products, and that someone even pushed ECharts further into the Mayor's Office
            of Data Analytics, City of New York. We are now full of unexpected delight and we'd like to thank every
            single ECharts enthusiast for his/her continuing support. </p>

        <div id="main" style="height:300px;"></div>
    </div>

    <div class="row featurette team">
        <h2>TEAM</h2>

        <p>The ECharts team is a bunch of distinct, diligent, dynamic people - who have different skills and hail from
            all corners of companies - on an extraordinary mission to make your data sing. Come check out the faces that
            make up Team ECharts.</p>

        <h2>Research & Development</h2>

        <div class="row">
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/linfeng.jpg">

                <h2><a href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng</a></h2>

                <p>Senior Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/shenyi.jpg">

                <h2><a href="http://weibo.com/pissang" target="_blank">Shen Yi</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/erik.jpg">

                <h2><a href="http://weibo.com/errorrik" target="_blank">Dong Rui</a></h2>

                <p>Senior Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/sushuang.jpg">

                <h2><a href="http://weibo.com/u/2113446991" target="_blank">Su Shuang</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/denghongqi.jpg">

                <h2><a href="http://weibo.com/u/2810393271" target="_blank">Deng Hongqi</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/yangji.jpg">

                <h2><a href="http://weibo.com/wind108369" target="_blank">Yang Ji</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/loutongbing.jpg">

                <h2><a href="http://weibo.com/loutongbing" target="_blank">Lou Tongbing</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
        </div>

        <h2>Product | Design</h2>

        <div class="row">
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/zuming.jpg">

                <h2><a href="http://weibo.com/forain" target="_blank">Zu Ming</a></h2>

                <p>Baidu business Front-End Team Manager</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/huangyue.jpg">

                <h2><a href="http://weibo.com/u/1823030471" target="_blank">Huang Yue</a></h2>

                <p>Interaction Designer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/wangjunting.jpg">

                <h2><a href="http://weibo.com/u/1237163505" target="_blank">Wang Junting</a></h2>

                <p>Interaction Designer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/huyao.jpg">

                <h2><a href="http://weibo.com/p/1005051742233685" target="_blank">Hu Yao</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
            <!--div class="col-md-2 text-center">
              <img class="img-circle" src="asset/img/about/zhangyanru.jpg">
              <h2><a href="#" target="_blank">Zhang Yanru</a></h2>
              <p>Interaction Designer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
              <img class="img-circle" src="asset/img/about/yandong.jpg">
              <h2><a href="http://weibo.com/ShiMiTu2007" target="_blank">颜东</a></h2>
              <p>视觉中国设计总监</p>
            </div-->
        </div>

        <h2>Expert Advisors</h2>

        <div class="row">
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/chenwei.jpg">

                <h2><a href="http://weibo.com/shearwarp" target="_blank">Chen Wei</a></h2>

                <p>Professor at Zhejiang University</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/huangzhimin.jpg">

                <h2><a href="http://weibo.com/u/2006785117" target="_blank">Huang Zhimin</a></h2>

                <p>CTO of Caixin Media</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/lizhan.jpg">

                <h2><a href="http://weibo.com/u/2042635201" target="_blank">Li Zhan</a></h2>

                <p>Director of Baidu <abbr title="Composite Search">CS</abbr> Department</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/shenhao.jpg">

                <h2><a href="http://weibo.com/shenhaolaoshi" target="_blank">Shen Hao</a></h2>

                <p>Professor at <abbr title="Communication University of China">CUC</abbr></p>
            </div>
        </div>

        <h2>Avid Aficionados</h2>

        <div class="row" style="margin-bottom:0;">
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/zhouyang.jpg">

                <h2><a href="http://weibo.com/zhouyummy" target="_blank">Zhou Yang</a></h2>

                <p>Data Analyst<br/><abbr title="ECharts package in R">recharts</abbr> author</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/weitaiyun.jpg">

                <h2><a href="http://weibo.com/taiyun" target="_blank">Wei Taiyun</a></h2>

                <p>Secretary-General of Capital of Statistics<br/><abbr title="ECharts package in R">recharts</abbr>
                    author</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/yaofeifei.jpg">

                <h2><a href="http://weibo.com/645008221" target="_blank">Yao Feifei</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/tanhe.jpg">

                <h2><a href="http://weibo.com/fengmengxia" target="_blank">Tan He</a></h2>

                <p>Master of <abbr title="Communication University of China">CUC</abbr><br/>Data Visualization Team at
                    the <abbr title="Communication University of China">CUC</abbr></p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/xieshiwei.jpg">

                <h2><a href="https://github.com/i6ma" target="_blank">Xie Shiwei</a></h2>

                <p>Front-End Engineer at Baidu</p>
            </div>
            <div class="col-md-2 text-center">
                <img class="img-circle" src="asset/img/about/jaroslav.benc.jpg">

                <h2><a href="https://twitter.com/DatamaticIO" target="_blank">Jaroslav Benc</a></h2>

                <p>R&amp;D Software Engineer at Aviarc New Zealand</p>
            </div>
        </div>
    </div>
    <!-- Jumbotron -->
    <div class="jumbotron">
        <h1>JOIN US!</h1>

        <p class="lead">We know you are passionate and adventurous...so don't hesitate, do it now!</p>
        <a class="btn btn-large btn-warning" href="mailto:echarts(a)baidu.com"><i
            class="glyphicon glyphicon-envelope"></i> Contact Us &raquo;</a>
    </div>
</div> <!-- /container -->

<footer id="footer"></footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
<script src="./asset/js/bootstrap.min.js"></script>
<script src="example/www/js/echarts.js"></script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts: 'example/www/js'
        }
    });
    require(
        [
            'echarts',
            'example/theme/infographic',
            'echarts/chart/line'
        ],
        function (ec, theme) {
            myChart = ec.init(document.getElementById('main'), theme);
            myChart.setOption({
                title: {
                    text: 'Github Stars',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'none'},
                    showDelay: 0
                },
                grid: {x: 45, x2: 20, y: 40, y2: 50},
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            interval: 0,
                            formatter: function (v) {
                                switch (v) {
                                    case '2013年6月':
                                        return '6\n2013';
                                    case '2014年1月':
                                        return '1\n2014';
                                    case '2015年1月':
                                        return '1\n2015';
                                    default:
                                        return v.substr(5).replace('月', '');
                                }
                            }
                        },
                        data: [
                            '2013年6月', '2013年7月', '2013年8月', '2013年9月', '2013年10月',
                            '2013年11月', '2013年12月', '2014年1月', '2014年2月', '2014年3月',
                            '2014年4月', '2014年5月', '2014年6月', '2014年7月', '2014年8月',
                            '2014年9月', '2014年10月', '2014年11月', '2014年12月', '2015年1月',
                            '2015年3月', '2015年4月', '2015年5月', '2015年6月'
                        ]
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 6,
                        min: 0,
                        max: 7200,
                        axisLabel: {
                            formatter: function (value) {
                                return Math.round(value - 0)
                            }
                        }
                    }
                ],
                series: [{
                    name: 'echarts',
                    type: 'line',
                    smooth: true,
                    itemStyle: {normal: {color: '#E87C25'}},
                    data: [
                        {value: 0, itemStyle: {normal: {label: {show: true, formatter: '1.0.0'}}}},
                        {value: 90, itemStyle: {normal: {label: {show: true, formatter: '1.1.0'}}}},
                        {value: 316, itemStyle: {normal: {label: {show: true, formatter: '1.1.1'}}}},
                        {value: 480, itemStyle: {normal: {label: {show: true, formatter: '1.2.0'}}}},
                        {value: 620, itemStyle: {normal: {label: {show: true, formatter: '1.2.1'}}}},
                        {value: 743, itemStyle: {normal: {label: {show: true, formatter: '1.3.0'}}}},
                        {value: 904, itemStyle: {normal: {label: {show: true, formatter: '1.3.5'}}}},
                        {value: 1090, itemStyle: {normal: {label: {show: true, formatter: '1.3.6'}}}},
                        {value: 1262, itemStyle: {normal: {label: {show: true, formatter: '1.3.7'}}}},
                        {value: 1368, itemStyle: {normal: {label: {show: true, formatter: '1.3.8'}}}},
                        {value: 1610, itemStyle: {normal: {label: {show: true, formatter: '1.4.0'}}}},
                        {value: 1767, itemStyle: {normal: {label: {show: true, formatter: '1.4.1'}}}},
                        {value: 1928, itemStyle: {normal: {label: {show: true, formatter: '2.0.0'}}}},
                        {value: 2390, itemStyle: {normal: {label: {show: true, formatter: '2.0.1'}}}},
                        {value: 2610, itemStyle: {normal: {label: {show: true, formatter: '2.0.2'}}}},
                        {value: 2740, itemStyle: {normal: {label: {show: true, formatter: '2.0.3'}}}},
                        {value: 2930, itemStyle: {normal: {label: {show: true, formatter: '2.0.4'}}}},
                        {value: 3210, itemStyle: {normal: {label: {show: true, formatter: '2.1.8'}}}},
                        {value: 3610, itemStyle: {normal: {label: {show: true, formatter: '2.1.9'}}}},
                        {value: 5600, itemStyle: {normal: {label: {show: true, formatter: '2.2.0'}}}},
                        {value: 6200, itemStyle: {normal: {label: {show: true, formatter: '2.2.1'}}}},
                        {value: 6600, itemStyle: {normal: {label: {show: true, formatter: '2.2.2'}}}},
                        {value: 6949, itemStyle: {normal: {label: {show: true, formatter: '2.2.3'}}}},
                        {value: 7200, itemStyle: {normal: {label: {show: true, formatter: '2.2.5'}}}}
                    ]
                }]
            });
            window.onresize = myChart.resize;
        }
    );

</script>
</body>
</html>
